<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<canvas id="canvas" width="500" height="500"></canvas>
	
	<script>
		class Ball{
			constructor(radius=40, color="#fff") {
				this.x = 0;
				this.y = 0;
				this.radius = radius;
				this.rotation = 0;
				this.scaleX = 1;
				this.scaleY = 1;
				
				this.lineWidth = 1;
			}
			draw(context){
				context.save();
				context.translate(this.x, this.y);
				context.rotate(this.rotation);
				context.scale(this.scaleX, this.scaleY);
				context.lineWidth = this.lineWidth;
				context.fillStyle = this.color;
				context.beginPath();
				context.arc(0,0,this.radius, 0, (Math.PI * 2), true);
				context.closePath();
				context.fill();
				if(this.lineWidth > 0){
					context.stroke();
				}
				context.restore();
			}
		}
		
		var canvas = document.getElementById('canvas'),
				context = canvas.getContext('2d'),
				ball = new Ball(),
				vx = Math.random() * 10 - 5,
				vy = Math.random() * 10 - 5;
		ball.x = canvas.width / 2;
		ball.y = canvas.height / 2;
		
		(function drawFrame(){
			window.requestAnimationFrame(drawFrame, canvas);
			context.clearRect(0, 0, canvas.width, canvas.height);
			
			var left = 0, top = 0, right = canvas.width, bottom = canvas.height;
			ball.x += vx;
			ball.y += vy;
			
			if(ball.x + ball.radius > right){
				ball.x = right - ball.radius;
				vx *= -1;
			}else if(ball.x - ball.radius < left){
				ball.x = left + ball.radius;
				vx *= -1;
			}
			if(ball.y + ball.radius > bottom){
				ball.y = bottom - ball.radius;
				vy *= -1;
			}else if(ball.y - ball.radius < top){
				ball.y = top + ball.radius;
				vy *= -1;
			}
			ball.draw(context);
		}());
		
	</script>
</body>
</html>